<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <template id="my-template">
      <style>
        span {
          color: green;
        }
      </style>
    </template>
    <div id="host">123</div>
    <span>我是普通的span元素</span>
    <p is="word-count" name="word-count">word-count</p>
    <popup-info size="11"></popup-info>

    <template id="my-paragraph">
      <p>my-paragraph</p>
      <p>
        <slot name="my-text">我是默认文本</slot>
      </p>
    </template>
    <my-paragraph>
      <span slot="my-text">通过slot填写的文本</span>
    </my-paragraph>

    <script src="./3.使用template和slot.js" defer></script>
  </body>
</html>
